<template>
    <div class="container">

        <el-divider></el-divider>
        <el-table :data="tableData" stripe style="width: 100%">
            <el-table-column prop="orderType" label="订单类型"> </el-table-column>
            <el-table-column prop="payMoney" label="金额"> </el-table-column>
            <el-table-column prop="endAddress" label="地址"> </el-table-column>
            <el-table-column prop="nickName" label="订单信息">
                <el-link type="primary" slot-scope="scope" @click="showDetail(scope)">查看信息 </el-link>
            </el-table-column>
            <el-table-column prop="status" label="状态"> </el-table-column>
            <el-table-column prop="publicTime" label="发单时间"> </el-table-column>
            <el-table-column label="操作"> <template slot-scope="scope">
                    <el-button type="primary" @click="orderView(scope)">查看</el-button>
                    <el-popconfirm style="margin-left:10px" title="这是一段内容确定 删除吗？" @confirm="delOrder(scope)">
                        <el-button type="danger" slot="reference">删除</el-button>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination @current-change="handleCurrentChange" :current-page.sync="currentPage" :page-size="pagesize"
            layout="prev, pager, next, jumper" :total="total"> </el-pagination>
        <el-dialog title="订单信息" :visible.sync="dialogVisible">

            <div class="orderDetail">

                <div class="item" v-for="(item,i) in orderInfo" :key="i"> <span>{{ item.key }}：</span> <span
                        v-if="item.key != '图片' && item.key != '打印附件'">{{ item.value }}</span>

                    <el-image v-else-if="item.key == '图片'" style="width: 100px; height: 100px" :src="item.value"
                        :preview-src-list="[item.value]"> </el-image> <template v-else>

                        <el-link type="primary" v-for="file in item.value" :key="file" :href="file" target="_blank">附件{{
                        
                        i + 1 }}</el-link>

                    </template>

                </div>

            </div> <span slot="footer" class="dialog-footer">

                <el-button type="primary" @click="dialogVisible = false">关闭 </el-button>

            </span>

        </el-dialog>
    </div>
</template>


    


<script>
import { formatOrderInfo } from '../../utils/util'
export default {
    data() {
        return {
            tableData: [],
            currentPage: 1,
            pagesize: 10,
            total: 0,
            dialogVisible: false,//订单信息弹窗开关 
            orderDetail: []//订单信息中的内容 }
        }
    },
    methods: {
        handleCurrentChange(val) {
            // console.log(`当前页: ${val}`); 
            this.page = val
            this.getOrderList()
        },
        getOrderList() {
            this.$http.get('/admGetOrders', {
                params: {
                    currentPage: this.currentPage,
                    pagesize: this.pagesize
                }
            }).then(res => {
                //返回的数据在res.data中 
                //console.log(res.data) 
                if (res.data.status === 'success') {
                    this.total = res.data.total
                    this.tableData = res.data.result
                } else { this.$message.error('服务器错误') }
            }).catch(err => {
                console.log(err)
                this.$message.error('服务器错误')
            })
        },
         
        //查看 
        orderView(scope) {
            //console.log(scope) 
            const { _id } = scope.row
            this.$router.push({ name: 'OrderView', params: { _id } })
        },
        //删除 
        delOrder(scope) {
            const { _id } = scope.row
            this.$http.get('/delOrder', {
                params: { _id }
            }).then(res => {
                if (res.data === 'success') {
                    this.$message.success('删除成功')
                } else { this.$message.error('删除失败') }
            }).catch(error => { this.$message.error('删除失败') })
            this.getOrderList();
        },

        //展示订单详情 
        showDetail(scope) {
            this.dialogVisible = true
            //格式化订单内容信息 
            this.orderInfo = formatOrderInfo(scope.row)
        },
    },
    created() {
        this.getOrderList()
    },
}


</script>

<style lang="scss" scoped>
.container {
    background-color: #fff;
    padding: 10px;


}

.orderDetail {
    display: flex;
    justify-content: flex-start;
    flex-direction: column;

    .item {
        text-align: left;



        display: flex;

        align-items: center;

        span:nth-child(1) {
            font-weight: bold;
            font-size: 16px;
            width: 80px;
            text-align: right;
        }
    }
}
</style>